<template>
  <div>
    <Header></Header>
    <Search></Search>
    <List :letter="letter"></List>
    <Alphabet @change="handleLetterClick"></Alphabet>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Search from "./components/Search.vue";
import List from "./components/List";
import Alphabet from "./components/Alphabet.vue";
export default {
  components: { Header, Search, List, Alphabet },
  data() {
    return {
      letter: "",
    };
  },
  methods: {
    handleLetterClick(val) {
      this.letter = val;
    },
  },
};
</script>

<style lang="stylus" scoped></style>
